<template>
  <div style="width:100%;overflow:hidden">
    <img style="width:100%" :src="img">
  </div>
</template>

<script>
  import global from '../lib/global'
  import axios from 'axios'

  export default {
    data() {
      return {
        img: '',
        is_viewing: true
      }
    },
    mounted() {
      this.$store.commit('setTitle', 'viewPhoto')

      if (!this.$store.state.username) {
        this.$router.redirect('/login?redirectTo=' + encodeURIComponent(location.hash.substring(1)))
        return
      }

      global.on_close = () => {
        this.is_viewing = false
      }

      this.getPhoto()
    },
    methods: {
      getPhoto() {
        axios.post('/getPhoto.do', {}).then(result => {
          var resObj = result.data
          if (resObj.result == -1) {
            this.$store.commit('toast', {
              content: resObj.msg,
              type: 'warn'
            })
          } else if (resObj.result == 0) {
            this.$router.push('/login?redirectTo=' + encodeURIComponent(location.hash.substring(1)))
          } else {
            this.img = 'data:image/jpeg;base64,' + resObj.photoData
            if (this.is_viewing) {
              setTimeout(() => {
                this.getPhoto()
              }, 1000)
            }
          }
        }, (response) => {
          console.log(response)
        })
      }
    }
  }
</script>
